<template>
  <div class="tpl16-top" :style="{'padding-bottom':tplItemData.modulePadding+'px'}">
    <div class="top">
      <a @click="JumpName('item-class-list')" class="ico_menu"><i></i><span>分类</span></a>
      <div class="logo"><img :src="tplItemData.imgpic"></div>
      <a @click="JumpName('member')" class="ico_user"><i></i><span>会员</span></a>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    searchList() {
      this.$JumpName(this, 'item-list', { title: this.keyword })
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/mixin";
.tpl16-top{
  .top {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl16/16top_bg.png) no-repeat;
    background-size: cover;
    .logo {
      width: 220px;
      img {
        display: block;
        width: 100%;
      }
    }
    >a {
      color: #666;
      padding: 0 10px;
      &.ico_menu i {
        background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl16/class_icon.png);
      }
      &.ico_user i {
        background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl16/user_icon.png);
      }
      i {
        display: block;
        height: 30px;
        width: 30px;
        margin: 0 auto 6px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }
  }
}
</style>